<template>
  <div
    :class="classes"
    v-show="show"
  >
    <slot></slot>
    </div>
</template>
<script>
const prefixCls = 'ivu-tabs-tabpane';

export default {
	name: 'TabPane',
	props: {
		name: {
			type: String,
		},
		label: {
			type: [String, Function],
			default: '',
		},
		icon: {
			type: String,
		},
		disabled: {
			type: Boolean,
			default: false,
		},
		closable: {
			type: Boolean,
			default: null,
		},
	},
	data() {
		return {
			prefixCls: prefixCls,
			show: true,
			active: false,
			currentName: this.name,
		};
	},
	computed: {
		classes() {
			return {
				[prefixCls]: true,
				hidden: !this.active,
			};
		},
	},
	methods: {
		updateNav() {
			this.$parent.updateNav();
		},
	},
	watch: {
		name(val) {
			this.currentName = val;
			this.updateNav();
		},
		label() {
			this.updateNav();
		},
		icon() {
			this.updateNav();
		},
		disabled() {
			this.updateNav();
		},
		'$parent.activeKey'(v) {
			this.$nextTick(() => {
				this.active = v === this.currentName;
			});
		},
	},
	mounted() {
		this.updateNav();
		if (!this.currentName) {
			for (let i = 0; i < this.$children.length; i++) {
				if (this.$children[i] === this) {
					this.currentName = i;
				}
			}
		}
		if (this.$parent.activeKey === this.currentName) {
			this.active = true;
		}
	},
	destroyed() {
		this.updateNav();
	},
};
</script>
<style lang="less">
.ivu-tabs-tabpane.hidden > * {
	visibility: hidden;
}
</style>
